<template>
  <div class="user">
    <Header />
    <div class="Breadcrumbs">
      <Breadcrumb />
    </div>
    <div class="user_box">
      <el-main>
        <el-form ref="form" :model="edit" label-width="120px" :rules="rules" label-position="left">
          <el-row>
            <el-form-item label="旧密码" prop="old_pass">
              <el-col class="item_mr" :lg="24">
                <div class="user_item">
                  <el-input v-model="edit.old_pass" show-password placeholder="请输入旧密码">
                  </el-input>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item prop="password" label="登录密码">
              <el-col class="item_mr" :lg="24">
                <div class="user_item">
                  <el-input v-model="edit.password" show-password placeholder="请输入新密码">
                  </el-input>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item prop="password_two" label="确认密码">
              <el-col class="item_mr" :lg="24">
                <div class="user_item">
                  <el-input v-model="edit.password_two" show-password placeholder="请再次输入密码">
                  </el-input>
                </div>
              </el-col>
            </el-form-item>
          </el-row>
        </el-form>

        <el-row class="mrBor">
          <el-col style="margin-top: 38px" :lg="24">
            <el-button type="button" @click="back" class="context"
              style="width: 145px; background-color: #fff">取消</el-button>
            <el-button type="button" @click="save('form')" class="pubBtn3"
              style="margin-left: 40px; width: 145px">保存</el-button>
          </el-col>
        </el-row>
      </el-main>
    </div>
    <!-- <Service v-if="this.$route.meta.serve" /> -->
  </div>
</template>

<script>
import { updatePwd } from "@/api";
import { VUE_APP_BASE_API } from "@/config.js";
import Header from "@/components/Header";
import Breadcrumb from "@/components/Breadcrumb";
import Service from "@/components/Service";
export default {
  components: {
    Header,
    Breadcrumb,
    Service,
  },
  data() {
    var passwordPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else {
        //正则表达式判断密码应长度大于8,大小写字母、数字、特殊字符三者或以上组合  
        var pwpattent = /^(?![A-Za-z]+$)(?![A-Z\d]+$)(?![A-Z\W]+$)(?![a-z\d]+$)(?![a-z\W]+$)(?![\d\W]+$)\S{8,}$/;
        console.log(pwpattent.test(value));
        if (!pwpattent.test(value)) {
          callback(new Error('密码应8位以上并且至少包含数字、大小写字母及特殊字符中三者或以上组合'));
        } else {
          callback();
        }
      }
    };
    var passwordPass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'));
      } else {
        if (value !== this.edit.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      }
    };
    return {
      VUE_APP_BASE_API,
      edit: {
        old_pass: "",
        password: "",
        password_two: "",
      },
      rules: {
        password: [
          { required: true, validator: passwordPass, trigger: 'blur' }
        ],
        password_two: [
          { required: true, validator: passwordPass2, trigger: 'blur' }
        ],
        old_pass: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
      }
    };
  },
  async mounted() {
    // try {
    //   this.edit = await getNowUser();
    //   // console.log(this.edit.thumb);
    // } catch (e) {
    //   this.$message.error(e.message);
    // }
  },
  methods: {
    back() {
      this.$router.back();
    },
     save(formName) {
      try {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            const { old_pass, password, password_two } = this.edit;
            await updatePwd({
              old_pass,
              password,
              password_two,
            });
            this.$message.success("修改成功");
            await this.$store.dispatch("user/resetToken");
            sessionStorage.setItem("show", "");
            localStorage.setItem("avatar", "");
            this.$router.push(`/web/index`);
            location.reload();
          } else {
            return false;
          }
        });

      } catch (e) {
        this.$message.error(e.message);
      }
    },
  },
};
</script>

<style scoped lang="less">
.Breadcrumbs {
  background-color: #f4f5f7;
  width: 100%;
  margin-top: 100px;
  padding-left: 320px;
  margin-left: 0 !important;
}

.item_mr {
  margin-bottom: 20px;
}

.user_box {
  width: 600px;
  margin-left: 320px;

  .el-main {
    margin: 0;
    padding: 30px 0;
  }

  .user_logo_box {
    display: flex;
    align-items: center;

    .user_logo {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: darkred;
    }

    .context {
      color: #34bf92;
      margin-left: 23px;
    }
  }

  .user_item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .context {
      width: 120px;
      font-weight: 400;
    }

    .user_item_s {
      display: flex;
      align-items: center;

      .context {
        width: 150px;
        font-weight: 400;
      }

      .last {
        margin-left: 40px;
      }
    }
  }
}

.license_box {
  width: 100%;
  height: 257px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(230, 233, 240, 1);
  border-radius: 5px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  overflow: hidden;

  .avatar {
    display: block;
    width: 100%;
    height: 257px;
    object-fit: contain;
    overflow: hidden;
  }
}

.avatar-uploader-icon {
  font-size: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mrBor {
  border-top: 1px solid #e7eaf0;
  padding-top: 25px;
  margin-top: 25px;

  .zy {
    margin-bottom: 15px;
  }
}
</style>
